<template>
	<div id="tc-home">
    <tc-header></tc-header>
    <div class="main">
      <div class="menu" :style="{ height: `${height}px` }">
        <happy-scroll color="rgba(189, 189, 189, .5)" resize>
          <el-menu :router="true" :unique-opened="true" :default-active="path" >
            <el-submenu :index="index + ''" v-for="(item, index) in data" :key="item.id">
              <template slot="title">
                <i class="iconfont" :class="item.obj.iconId" style="padding-right: 5px"></i>
                <span>{{ item.obj.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="val.obj.url || '#'" v-for="val in item.children" :key="val.id" @click.native="updatePath(val.obj.url)">{{ val.obj.name }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </happy-scroll>
      </div>
      <div class="container" :style="{ height: `${height}px` }">
        <!--<p class="page-title font16 bg-color-white">{{ title }}</p>-->
        <div class="container-main">
          <router-view/>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import tcHeader from './header'
  import { nextPage } from '../../../assets/js/index'
  import ajax from '../../../api/ajax/ajax'
  import api from '../../../api/url'
  import { mapGetters } from 'vuex'

	export default {
		name: 'tc-home',
    components: {
      tcHeader
    },
    data () {
      return {
        data: [],
        height: 0
      }
    },
    computed: {
      ...mapGetters(['path', 'v3platform'])
    },
    methods: {
      // 获取当前系统
      getCurrSystem () {
        ajax.post(api.GET_CURR_SYSTEM).then(res => {
          this.sysNo = res.data
          if (this.sysNo === 'M201' || this.sysNo === 'M203' || this.sysNo === 'M204' || this.sysNo === 'M205') { // 201分析, 203发布，204网关，205推送
            ajax.post(api.GETMENU, { sys_no: this.sysNo }).then(res => {
              if (this.v3platform === 'ios') {
                res.data[0].children.splice(1, 1)
              }
              this.data = res.data
            })
            ajax.post(api.QUERYALLCOMMONDATA).then(res => {
              this.commonData = res.data
              sessionStorage.setItem('commonData', JSON.stringify(this.commonData))
            })
          } else if (this.sysNo === 'M202') {
            ajax.post(api.GETMENU2, {
              sys_no: this.sysNo
            }).then(res => {
              this.data = res.data
            })
          }
        })
      },
      updatePath (url) {
        nextPage(url)
      }
    },
    created () {
      this.getCurrSystem()
      this.height = window.innerHeight - 50
      window.onresize = () => {
        this.height = window.innerHeight - 50
      }
    }
	}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #tc-home
    .main
      padding-left 200px
      position relative
      .menu
        position absolute
        top 0
        left 0
        width 200px
        background #333
        .happy-scroll-container
          width 100% !important
          height 100% !important
          .happy-scroll-content
            width 100%
            .el-menu
              background #333
              border-right solid 0
            .el-submenu .el-menu-item
              padding-left 45px!important
              min-width 160px
              color #bbb
            .el-submenu__title, .el-submenu .el-menu-item
              height 35px
              line-height 35px
            .el-menu-item-group
              .el-menu-item-group__title
                padding 0
              .el-menu-item
                position relative
              .el-menu-item:before
                content ''
                width 3px
                height 3px
                background #666
                position absolute
                top 16px
                left 27px
            .el-submenu__title, i.iconfont
              color #bbb
            .el-menu-item:focus, .el-menu-item:hover
              background #333
            .el-submenu__title:focus, .el-submenu__title:hover
              background #4c4c4c
            .is-active
              .el-submenu__title, i.iconfont, span
                color #4093ff
              .el-menu-item-group
                .is-active
                  color #4093ff
              .el-menu-item:hover
                background #4c4c4c
              .is-active:hover
                color #fff
              .el-submenu__title:hover
                i.iconfont, span
                  color #fff
      .container
        .page-title
          height 50px
          line-height 50px
          padding 0 20px
          font-weight bold
          margin-bottom 10px
        .container-main
          height 100%
</style>
